<template>
    <div class="app-container">
      <div class="filter-container">
        <el-input
          v-model="listQuery.searchKey1"
          placeholder="项目名称"
          style="width: 200px"
          class="filter-item"
        />
        <el-select
          v-model="listQuery.searchKey2"
          style="width: 200px"
          class="filter-item"
          placeholder="变更类型"
        >
          <el-option
            v-for="item in changeTypeOptions"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="searchAndSort"
        >
          查找
        </el-button>
      </div>
  
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column label="项目编号" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目名称" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="负责人" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectOwnerName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属部门" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectDepartment }}</span>
          </template>
        </el-table-column>
        <el-table-column label="负责人电话" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectOwnerPhone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="负责人邮箱" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectOwnerEmail }}</span>
          </template>
        </el-table-column>
        <el-table-column label="变更类型" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectChangeType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="变更日期" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectChangeRequestDate | convertUTCToGMTString }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="230"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row, $index }">
            <el-button
            size="mini"
            type="success"
            @click="$router.push(`/project/change/${row.id}`)"
          >
            查看
          </el-button>
          <!-- <el-button
            v-if="checkPermission(['项目审批：删除'])"
            size="mini"
            type="danger"
            @click="handleDelete(row, $index)"
          >
            删除
          </el-button> -->
          </template>
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.pageIndex"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </div>
  </template>
  
  <script>
  import { searchTwo } from "@/utils";
  import Pagination from "@/components/Pagination";
  import { fetchDoneProjectChangeList, getParticipateDoneProjectChecks } from "@/api/project-change";
  import { checkPermission } from '@/utils/permission';
  import projectChangeTypeList from '@/data/projectChangeTypes';
  import { mapGetters } from "vuex";
  
  export default {
    name: "projectChangeList",
    components: { Pagination },
    data() {
      return {
        tableKey: 0,
        totalList: null,
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          pageIndex: 1,
          limit: 10,
          searchField1: "projectName",
          searchKey1: "",
          searchField2: "projectChangeType",
          searchKey2: "",
        },
        changeTypeOptions: projectChangeTypeList,
      };
    },
    computed: {
    ...mapGetters(["id"])
    },
    created() {
      this.getList();
    },
    filters: {
    convertUTCToGMTString(val) {
      if (!val) return "";
      const currentDate = new Date(val);
      const month =
        currentDate.getMonth() < 9
          ? `0${currentDate.getMonth() + 1}`
          : (currentDate.getMonth() + 1).toString();
      return `${currentDate.getFullYear()}-${month}-${currentDate.getDate()}`;
    },
  },
    methods: {
      checkPermission,
      getList() {
        this.listLoading = true;
        if (checkPermission(['项目审批：变更'])) {
          fetchDoneProjectChangeList().then((res) => {
            this.totalList = res.data;
            this.handleFilter();
  
            this.listLoading = false;
          });
        } else {
          getParticipateDoneProjectChecks(this.id).then((res) => {
            this.totalList = res.data;
            this.handleFilter();
  
            this.listLoading = false;
          });
        }
      },
      handleFilter() {
        const result = searchTwo(this.totalList, this.listQuery);
        this.list = result.data;
        this.total = result.total;
      },

      searchAndSort() {
        this.listQuery.pageIndex = 1;
        this.handleFilter();
      },
    //   handleDelete(row, index) {
    //   this.$confirm(`是否确定删除该"${row.projectName}"的变更条目？`, "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   }).then(async () => {
    //     //请求接口
    //     deleteProjectChange(row.id)
    //       .then((res) => {
    //         if (res.data) {
    //           this.$message({
    //             type: "success",
    //             message: "删除成功!",
    //           });
    //           //重新获取
    //           this.getList();
    //         } else {
    //           this.$message({
    //             message: "变更条目删除失败",
    //             type: "error",
    //           });
    //         }
    //       })
    //       .catch((err) => {
    //         this.$message({
    //           message: "变更条目删除失败",
    //           type: "error",
    //         });
    //       });
    //   });
    // },
    },
  };
  </script>
  